.banner {
  position: relative;
  overflow: auto;
  text-align: center;
  ul {
    li {
      list-style: none;
      float: left;
      display: block;
      min-height: $poster-height;
      background-size: cover;
    }
  }
  .dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    .dot {
      font-size: 0;
      margin: 0 10px;
      width: 15px;
      height: 15px;
      display: inline-block;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      border: 2px solid #fff;
      cursor: pointer;
      &.active{
        background: #fff;
        opacity: 1;
        filter: alpha(opacity=100);
      }
    }
  }
}

.poster {
  position: relative;
  .prev {
    position: absolute;
    top: $poster-height/2;
    width: 27px;
    height: 86px;
    margin-top: -43px;
    margin-left: 15px;
    z-index: 10;
    cursor: pointer;
    font-size: 86px;
    color: #fff;
    opacity: 0.4;
    filter: alpha(opacity=0.4);
    &:hover {
      opacity: 1;
      filter: alpha(opacity=1);
    }
  }
  .next {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 86px;
    margin-top: -43px;
    z-index: 10;
    cursor: pointer;
    font-size: 86px;
    color: #fff;
    opacity: 0.4;
    filter: alpha(opacity=0.4);
    right: 0;
    margin-right: 15px;
    &:hover {
      opacity: 1;
      filter: alpha(opacity=1);
    }
  }
}

